React-ன் `experimental_useFormStatus`-ஐப் பயன்படுத்தி படிவ சரிபார்ப்பை மாஸ்டரிங் செய்தல்

படிவங்கள் வலை இடைவினையின் அடித்தளமாகும். ஒரு எளிய செய்திமடல் பதிவு முதல் ஒரு சிக்கலான பல-படி நிதி பயன்பாடு வரை, அவை பயனர்கள் எங்கள் பயன்பாடுகளுடன் தொடர்பு கொள்ளும் முதன்மை வழியாகும். ஆயினும், பல ஆண்டுகளாக, React-ல் படிவ நிலையை நிர்வகிப்பது சிக்கல், போயிலர்ப்ளேட் மற்றும் சார்பு சோர்வு ஆகியவற்றின் ஆதாரமாக இருந்து வருகிறது. நாங்கள் கட்டுப்படுத்தப்பட்ட கூறுகளைக் கையாண்டோம், மாநில மேலாண்மை நூலகங்களுடன் போராடினோம், மேலும் எண்ணற்ற `onChange` கையாளுபவர்களை எழுதினோம், இவை அனைத்தும் தடையற்ற மற்றும் உள்ளுணர்வு பயனர் அனுபவத்தைத் தேடுவதில் உள்ளன.

React குழு இந்த வலை அபிவிருத்தியின் அடிப்படை அம்சத்தை மறுபரிசீலனை செய்துள்ளது, இது React சர்வர் செயல்முறைகள்ஐ மையமாகக் கொண்ட ஒரு புதிய, சக்திவாய்ந்த முன்னுதாரணத்தை அறிமுகப்படுத்த வழிவகுத்தது. முற்போக்கான மேம்பாட்டின் கொள்கைகளின் அடிப்படையில் கட்டப்பட்ட இந்த புதிய மாதிரி, படிவக் கையாளுதலை அதன் இடத்திற்கு நெருக்கமாக நகர்த்துவதன் மூலம் எளிமைப்படுத்துவதை நோக்கமாகக் கொண்டுள்ளது - பெரும்பாலும், சர்வர். இந்த கிளையன்ட்-சைட் புரட்சியின் மையத்தில் இரண்டு புதிய சோதனை ஹூக்குகள் உள்ளன: `useFormState` மற்றும் இன்று எங்கள் விவாதத்தின் நட்சத்திரம், `experimental_useFormStatus`.

இந்த விரிவான வழிகாட்டி உங்களை `experimental_useFormStatus` ஹூக்கின் ஆழமான பார்வைக்கு அழைத்துச் செல்லும். அதன் தொடரியல் மட்டுமல்லாமல், இது செயல்படுத்தும் மன மாதிரியையும் ஆராய்வோம்: நிலை அடிப்படையிலான சரிபார்ப்பு தர்க்கம். இந்த ஹூக் UI-ஐ படிவ நிலையிலிருந்து எவ்வாறு பிரிக்கிறது, நிலுவையில் உள்ள நிலைகளை நிர்வகிப்பதை எவ்வாறு எளிதாக்குகிறது மற்றும் சர்வர் செயல்முறைகளுடன் இணைந்து வலுவான, அணுகக்கூடிய மற்றும் மிகச் சிறந்த செயல்திறன் கொண்ட படிவங்களை உருவாக்குகிறது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள், ஜாவாஸ்கிரிப்ட் ஏற்றப்படுவதற்கு முன்பே வேலை செய்கிறது. React-ல் படிவங்களை உருவாக்குவது பற்றி நீங்கள் நினைத்த எல்லாவற்றையும் மறுபரிசீலனை செய்யத் தயாராகுங்கள்.

ஒரு முன்னுதாரண மாற்றம்: React படிவங்களின் பரிணாமம்

`useFormStatus` கொண்டுவரும் கண்டுபிடிப்பை முழுமையாகப் பாராட்ட, நாம் முதலில் React சூழலில் படிவ மேலாண்மையின் பயணத்தைப் புரிந்து கொள்ள வேண்டும். இந்த சூழல் இந்த புதிய அணுகுமுறை அழகாக தீர்க்கும் சிக்கல்களை எடுத்துக்காட்டுகிறது.

பழைய காவலர்: கட்டுப்படுத்தப்பட்ட கூறுகள் மற்றும் மூன்றாம் தரப்பு நூலகங்கள்

பல ஆண்டுகளாக, React-ல் படிவங்களின் தரநிலை அணுகுமுறை கட்டுப்படுத்தப்பட்ட கூறு வடிவமாக இருந்தது. இதில் அடங்குவன:

• ஒவ்வொரு படிவ உள்ளீட்டின் மதிப்பையும் வைத்திருக்க ஒரு React நிலை மாறியைப் பயன்படுத்துதல் (எ.கா., `useState`-லிருந்து).
• ஒவ்வொரு முறை அழுத்தத்தின் போதும் நிலையைப் புதுப்பிக்க ஒரு `onChange` கையாளுபவரை எழுதுதல்.
• நிலை மாறியை உள்ளீட்டின் `value` ப்ராப்புக்கு மீண்டும் அனுப்புதல்.

இது React படிவத்தின் மீது முழு கட்டுப்பாட்டை அளித்தாலும், இது குறிப்பிடத்தக்க போயிலர்ப்ளேட்டை அறிமுகப்படுத்துகிறது. பத்து புலங்களைக் கொண்ட ஒரு படிவத்திற்கு, உங்களுக்கு பத்து நிலை மாறிகள் மற்றும் பத்து ஹேண்ட்லர் செயல்பாடுகள் தேவைப்படலாம். சரிபார்ப்பு, பிழை நிலைகள் மற்றும் சமர்ப்பிப்பு நிலையை நிர்வகிப்பது இன்னும் அதிக சிக்கலை சேர்க்கிறது, பெரும்பாலும் டெவலப்பர்கள் சிக்கலான தனிப்பயன் ஹூக்குகளை உருவாக்க அல்லது விரிவான மூன்றாம் தரப்பு நூலகங்களைத் தேட வழிவகுக்கும்.

Formik மற்றும் React Hook Form போன்ற நூலகங்கள் இந்த சிக்கலைத் தவிர்ப்பதன் மூலம் முக்கியத்துவம் பெற்றன. அவை நிலை மேலாண்மை, சரிபார்ப்பு மற்றும் செயல்திறன் மேம்பாட்டிற்கான சிறந்த தீர்வுகளை வழங்குகின்றன. இருப்பினும், அவை நிர்வகிக்க மற்றொரு சார்புநிலையை பிரதிநிதித்துவப்படுத்துகின்றன மற்றும் பெரும்பாலும் கிளையன்ட் பக்கத்தில் மட்டுமே செயல்படுகின்றன, இது முன்பக்கம் மற்றும் பேகெண்டுக்கு இடையே நகலெடுக்கப்பட்ட சரிபார்ப்பு தர்க்கத்திற்கு வழிவகுக்கும்.

புதிய யுகம்: முற்போக்கான மேம்பாடு மற்றும் சர்வர் செயல்முறைகள்

React சர்வர் செயல்முறைகள் ஒரு முன்னுதாரண மாற்றத்தை அறிமுகப்படுத்துகின்றன. முக்கிய யோசனை என்னவென்றால், வலை தளத்தின் அடித்தளத்தின் மீது உருவாக்குவதாகும்: நிலையான HTML `

` உறுப்பு. ஒரு சர்வர் செயல்முறையுடன் கூடிய படிவம் ஒரு கிளாசிக் HTML படிவ சமர்ப்பிப்பைப் போலவே செயல்படுகிறது - ஜாவாஸ்கிரிப்ட் தோல்வியுற்றாலோ அல்லது முடக்கப்பட்டாலோ கூட இது சரியாக செயல்பட முடியும். இது முற்போக்கான மேம்பாட்டின் சாராம்சமாகும்.

ஜாவாஸ்கிரிப்ட் ஏற்றப்படும்போது, ​​React படிவத்தின் சமர்ப்பிப்பு செயல்முறையை ஹைஜாக் செய்கிறது, முழு பக்கத்தை மீண்டும் ஏற்றுவதைத் தடுக்கும் மற்றும் சர்வர் செயல்முறையை ஒத்திசைவற்ற முறையில் செயல்படுத்துகிறது. இது நமக்கு இரண்டு உலகங்களிலும் சிறந்ததைக் கொடுக்கிறது: சர்வர்-ரெண்டர் செய்யப்பட்ட பயன்பாடுகளின் பின்னடைவு மற்றும் ஒரு-பக்க பயன்பாட்டின் (SPA) பணக்கார, ஊடாடும் அனுபவம்.

இந்த மாதிரி, வணிக தர்க்கம் மற்றும் சரிபார்ப்புக்கான உண்மை ஆதாரத்தை சர்வர் (அல்லது சர்வர் போன்ற சூழல்) க்கு நகர்த்துகிறது. கிளையன்ட்-சைட் குறியீடு மிகவும் எளிமையானதாகிவிடுகிறது, முதன்மையாக அந்த சர்வர் தகவல்தொடர்பின் *நிலையை* அடிப்படையாகக் கொண்டு UI ஐ வழங்குவதில் அக்கறை கொள்கிறது. `useFormStatus` செயல்பட வருவது இதுதான்.

ஹூட்டின் கீழ்: `experimental_useFormStatus` என்றால் என்ன?

`experimental_useFormStatus` ஹூக் என்பது ஒரு பெற்றோர் `` உறுப்பின் கடைசி சமர்ப்பிப்பு பற்றிய தகவல்களை வழங்க வடிவமைக்கப்பட்ட ஒரு கிளையன்ட்-சைட் கருவியாகும். இது படிக்க மட்டும் ஹூக் ஆகும், இது எந்த ப்ராப்களும் கீழே அனுப்பப்படாமல், படிவத்தின் சமர்ப்பிப்பு பற்றி தெரிந்து கொள்ள வேண்டிய அனைத்தையும் ஒரு கூறுக்குக் கூறுகிறது.

மைய செயல்பாடு

ஒரு பெரிய படிவத்திற்குள் ஒரு சமர்ப்பி பொத்தான் இருப்பதாகக் கற்பனை செய்து பாருங்கள். படிவம் சமர்ப்பிக்கும்போது இந்த பொத்தானுக்கு எப்படித் தெரியும்? பாரம்பரியமாக, நீங்கள் `isSubmitting` போன்ற ஒரு நிலை மாறியை பல கூறு அடுக்குகளின் (ப்ராப் துளையிடுதல்) கீழே அனுப்ப வேண்டும். `useFormStatus`-ஐப் பயன்படுத்தி, பொத்தான் கூறு இந்த தகவலைத் தானே கண்டறிய முடியும்.

ஹூக்கை ஒரு `` உறுப்புக்குள் வழங்கப்பட்ட ஒரு கூறிலிருந்து அழைக்க வேண்டும். இது குறிப்பிட்ட படிவத்தின் வாழ்நாள் சுழற்சி பற்றிய நிலை தகவல்களை வழங்குகிறது.

`useFormStatus` ஹூக்கின் உடற்கூறியல்

`const status = useFormStatus()` என்று அழைக்கும்போது, ​​பின்வரும் முக்கிய பண்புகளைக் கொண்ட ஒரு பொருளைப் பெறுவீர்கள்:

• `pending` (boolean): இது மிகவும் அடிக்கடி பயன்படுத்தப்படும் சொத்து. பெற்றோர் படிவம் தற்போது சமர்ப்பிக்கப்பட்டால், அது `true`-ஆகவும், இல்லையெனில் `false`-ஆகவும் இருக்கும். பொத்தான்களை முடக்குதல், ஏற்றுதல் சுழல் காட்டிகள் அல்லது நிலுவையில் உள்ள நிலைகளை வடிவமைப்பதற்கு இது சரியானது.
• `data` (FormData): `FormData` இடைமுகத்தை செயல்படுத்தும் ஒரு பொருள். இது படிவத்துடன் சமர்ப்பிக்கப்பட்ட தரவைக் கொண்டுள்ளது. ஆப்டிமிஸ்டிக் UI புதுப்பிப்புகளை செயல்படுத்துவதற்கு இது நம்பமுடியாத அளவிற்கு பயனுள்ளதாக இருக்கும் - எடுத்துக்காட்டாக, ஒரு பயனர் தங்கள் கருத்தை சமர்ப்பித்த உடனேயே ஒரு பட்டியலில் காட்டுவது, சர்வர் அதை உருவாக்கியதை உறுதிப்படுத்துவதற்கு முன்பே.
• `method` (string): படிவ சமர்ப்பிப்பிற்குப் பயன்படுத்தப்படும் HTTP முறை ('get' அல்லது 'post').
• `action` (function): சமர்ப்பிப்பின் போது அழைக்கப்பட்ட சர்வர் செயல்பாடுக்கு ஒரு குறிப்பு.

கோல்டன் விதி: ``-ன் குழந்தை

நினைவில் கொள்ள வேண்டிய ஒரு முக்கியமான விதி என்னவென்றால், `useFormStatus`-ஐப் பயன்படுத்தும் ஒரு கூறு, அது கண்காணிக்கும் `` உறுப்பின் குழந்தையாக வழங்கப்பட வேண்டும். இது `` டேக்கை வழங்கும் அதே கூறுக்குள் இருக்க முடியாது, ஏனெனில் அதற்கு படிவத்தின் சூழலை அணுக வேண்டும். இதனால்தான் நீங்கள் கிட்டத்தட்ட எப்போதும் `useFormStatus` தர்க்கத்தை வைத்திருக்க தனித்தனியாக உருவாக்கப்பட்ட ஒரு `` போன்ற கூறுகளைக் காண்பீர்கள்.

ஒரு எளிய உதாரணம்: ஸ்மார்ட் சமர்ப்பி பொத்தான்

மிகவும் பொதுவான பயன்பாட்டு வழக்கை செயல்படுத்துவதைப் பார்ப்போம். ஒரு நிலையான ``-க்கு பதிலாக, படிவத்தின் சமர்ப்பிப்பு நிலையைப் பற்றி அறிந்த ஒரு கூறுகளை உருவாக்குவோம்.

கோப்பு: SubmitButton.js

import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton() { const { pending } = useFormStatus(); return (

{pending ? 'சமர்ப்பிக்கப்படுகிறது...' : 'பதிவு செய்க'} ); }

கோப்பு: SignUpForm.js

import { SubmitButton } from './SubmitButton'; import { signUpAction } from './actions'; // A server action export function SignUpForm() { return ( மின்னஞ்சல்:
); }

இந்த எடுத்துக்காட்டில், `SubmitButton` முற்றிலும் சுய-கட்டுப்பாட்டில் உள்ளது. இது எந்த ப்ராப்களையும் பெறவில்லை. `SignUpForm` நிலுவையில் இருக்கும்போது தெரிந்து கொள்ளவும், தானாகவே முடக்கவும், அதன் உரையை மாற்றவும் `useFormStatus` ஐப் பயன்படுத்துகிறது. இது மீண்டும் பயன்படுத்தக்கூடிய, படிவத்தை அறிந்த கூறுகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த வடிவமாகும்.

விஷயத்தின் இதயம்: நிலை அடிப்படையிலான சரிபார்ப்பு தர்க்கம்

இப்போது நாம் முக்கிய கருத்துக்கு வருகிறோம். `useFormStatus` என்பது ஏற்றுதல் நிலைகளுக்கானது மட்டுமல்ல; இது சரிபார்ப்பு பற்றி சிந்திப்பதற்கான ஒரு வித்தியாசமான வழியின் முக்கிய இயக்கியாகும்.

"நிலை சரிபார்ப்பு" என்பதை வரையறுத்தல்

நிலை அடிப்படையிலான சரிபார்ப்பு என்பது ஒரு வடிவமாகும், அங்கு சரிபார்ப்பு கருத்து முதன்மையாக ஒரு படிவ சமர்ப்பிப்பு முயற்சியின் மூலம் பயனருக்கு வழங்கப்படுகிறது. ஒவ்வொரு முறை அழுத்தத்தின் போதும் (`onChange`) அல்லது பயனர் ஒரு புலத்தை விட்டு வெளியேறும்போதும் (`onBlur`) சரிபார்ப்பதற்குப் பதிலாக, முதன்மை சரிபார்ப்பு தர்க்கம் பயனர் படிவத்தை சமர்ப்பிக்கும்போது இயங்குகிறது. இந்த சமர்ப்பிப்பின் முடிவு - அதன் *நிலை* (எ.கா., வெற்றி, சரிபார்ப்பு பிழை, சர்வர் பிழை) - பின்னர் UI-ஐப் புதுப்பிக்கப் பயன்படுகிறது.

இந்த அணுகுமுறை React சர்வர் செயல்முறைகளுடன் சரியாகப் பொருந்துகிறது. சர்வர் செயல்பாடு சரிபார்ப்பிற்கான ஒரே ஆதாரமாகிறது. இது படிவத் தரவைப் பெறுகிறது, அதை உங்கள் வணிக விதிகளுக்கு எதிராக சரிபார்க்கிறது (எ.கா., "இந்த மின்னஞ்சல் ஏற்கனவே பயன்பாட்டில் உள்ளதா?"), மேலும் முடிவைக் குறிக்கும் ஒரு கட்டமைக்கப்பட்ட நிலை பொருளை வழங்குகிறது.

அதன் கூட்டாளி பங்கு: `experimental_useFormState`

`useFormStatus`, *என்ன* நடக்கிறது (நிலுவையில் உள்ளது) என்று கூறுகிறது, ஆனால் என்ன நடந்தது என்பதன் *முடிவை* அது கூறவில்லை. அதற்கு, நமக்கு அதன் உடன்பிறந்த ஹூக் தேவை: `experimental_useFormState`.

`useFormState` என்பது ஒரு படிவ செயலின் முடிவின் அடிப்படையில் நிலையைப் புதுப்பிக்க வடிவமைக்கப்பட்ட ஒரு ஹூக் ஆகும். இது செயல்பாடு செயல்பாட்டையும் ஒரு ஆரம்ப நிலையையும் வாதங்களாக எடுத்துக்கொள்கிறது மற்றும் உங்கள் படிவத்திற்கு அனுப்ப ஒரு புதிய நிலையையும் ஒரு ரேப் செய்யப்பட்ட செயல்பாடு செயல்பாட்டையும் வழங்குகிறது.

const [state, formAction] = useFormState(myAction, initialState);

• `state`: இது `myAction`-ன் கடைசி செயல்படுத்தலின் ரிட்டர்ன் மதிப்பைக் கொண்டிருக்கும். இங்கேதான் நம் பிழை செய்திகளைப் பெறுவோம்.
• `formAction`: இது உங்கள் செயலின் ஒரு புதிய பதிப்பாகும், அதை உங்கள் படிவத்தின் `
  `-ன் `action` ப்ராப்புக்கு அனுப்ப வேண்டும். இது அழைக்கப்பட்டால், அது அசல் செயல்பாட்டைத் தூண்டி, `state`-ஐப் புதுப்பிக்கும்.

ஒருங்கிணைந்த பணிப்பாய்வு: கிளிக் செய்வதிலிருந்து கருத்து வரை

`useFormState` மற்றும் `useFormStatus` ஆகியவை ஒரு முழுமையான சரிபார்ப்பு வளையத்தை உருவாக்க ஒன்றாக எவ்வாறு செயல்படுகின்றன என்பது இங்கே:

1. ஆரம்ப ரெண்டர்: படிவம் `useFormState`-ஆல் வழங்கப்பட்ட ஒரு ஆரம்ப நிலையுடன் ரெண்டர் செய்யப்படுகிறது. எந்த பிழைகளும் காட்டப்படவில்லை.
2. பயனர் சமர்ப்பிப்பு: பயனர் சமர்ப்பி பொத்தானைக் கிளிக் செய்கிறார்.
3. நிலுவை நிலை: சமர்ப்பி பொத்தானில் உள்ள `useFormStatus` ஹூக் உடனடியாக `pending: true`-ஐப் புகாரளிக்கிறது. பொத்தான் முடக்கப்பட்டு, ஒரு ஏற்றுதல் செய்தியைக் காட்டுகிறது.
4. செயல்முறை செயல்படுத்தல்: சர்வர் செயல்பாடு (`useFormState`-ஆல் மூடப்பட்டது) படிவத் தரவுடன் செயல்படுத்தப்படுகிறது. இது சரிபார்ப்பைச் செய்கிறது.
5. செயல்முறை திரும்புதல்: செயல்பாடு சரிபார்ப்பில் தோல்வியடைந்து, ஒரு நிலை பொருளை வழங்குகிறது, எடுத்துக்காட்டாக:
   `{ message: "சரிபார்ப்பு தோல்வியுற்றது", errors: { email: "இந்த மின்னஞ்சல் ஏற்கனவே எடுக்கப்பட்டது." } }`
6. நிலை புதுப்பிப்பு: `useFormState` இந்த ரிட்டர்ன் மதிப்பை பெற்று அதன் `state` மாறி புதுப்பிக்கிறது. இது படிவக் கூறின் மறு-ரெண்டரைத் தூண்டுகிறது.
7. UI கருத்து: படிவம் மீண்டும் ரெண்டர் செய்யப்படுகிறது. `useFormStatus`-லிருந்து வரும் `pending` நிலை `false`-ஆக மாறும். கூறு இப்போது `state.errors.email`-ஐப் படித்து, மின்னஞ்சல் உள்ளீட்டுப் புலத்திற்கு அடுத்ததாக பிழை செய்தியைக் காட்டலாம்.

இந்த முழு ஓட்டமும் பயனருக்கு தெளிவான, சர்வர்-அதிகாரப்பூர்வ கருத்தை வழங்குகிறது, இது முற்றிலும் சமர்ப்பிப்பு நிலை மற்றும் முடிவால் இயக்கப்படுகிறது.

நடைமுறை மாஸ்டர் கிளாஸ்: பல-புல பதிவு படிவத்தை உருவாக்குதல்

ஒரு முழுமையான, தயாரிப்பு-வகை பதிவு படிவத்தை உருவாக்குவதன் மூலம் இந்த கருத்துகளை உறுதிப்படுத்துவோம். சரிபார்ப்புக்கு சர்வர் செயல்பாட்டையும், சிறந்த பயனர் அனுபவத்தை உருவாக்க `useFormState` மற்றும் `useFormStatus` இரண்டையும் பயன்படுத்துவோம்.

படி 1: சரிபார்ப்புடன் சர்வர் செயல்பாட்டை வரையறுத்தல்

முதலில், நமக்கு சர்வர் செயல்பாடு தேவை. வலுவான சரிபார்ப்புக்கு, பிரபலமான நூலகம் Zod ஐப் பயன்படுத்துவோம். நீங்கள் Next.js போன்ற கட்டமைப்பைப் பயன்படுத்துகிறீர்கள் என்றால், இந்த செயல்பாடு `'use server';` டைரக்டிவ் உடன் குறிக்கப்பட்ட ஒரு தனி கோப்பில் இருக்கும்.

கோப்பு: actions/authActions.js

'use server'; import { z } from 'zod'; // சரிபார்ப்பு ஸ்கீமாவை வரையறுக்கவும் const registerSchema = z.object({ username: z.string().min(3, 'பயனர் பெயர் குறைந்தது 3 எழுத்துகள் இருக்க வேண்டும்.'), email: z.string().email('சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்.'), password: z.string().min(8, 'கடவுச்சொல் குறைந்தது 8 எழுத்துகள் இருக்க வேண்டும்.'), }); // எங்கள் படிவத்திற்கான ஆரம்ப நிலையை வரையறுக்கவும் export const initialState = { message: '', errors: {}, }; export async function registerUser(prevState, formData) { // 1. படிவ தரவைச் சரிபார்க்கவும் const validatedFields = registerSchema.safeParse( Object.fromEntries(formData.entries()) ); // 2. சரிபார்ப்பு தோல்வியுற்றால், பிழைகளைத் திருப்பி அனுப்பவும் if (!validatedFields.success) { return { message: 'சரிபார்ப்பு தோல்வியடைந்தது. புலங்களைச் சரிபார்க்கவும்.', errors: validatedFields.error.flatten().fieldErrors, }; } // 3. (போலி) பயனர் ஏற்கனவே தரவுத்தளத்தில் உள்ளதா என சரிபார்க்கவும் // ஒரு உண்மையான பயன்பாட்டில், நீங்கள் இங்கே உங்கள் தரவுத்தளத்தை வினவுவீர்கள். if (validatedFields.data.email === 'user@example.com') { return { message: 'பதிவு தோல்வியடைந்தது.', errors: { email: ['இந்த மின்னஞ்சல் ஏற்கனவே பதிவு செய்யப்பட்டுள்ளது.'] }, }; } // 4. (போலி) பயனரை உருவாக்கவும் console.log('பயனரை உருவாக்குதல்:', validatedFields.data); // 5. ஒரு வெற்றி நிலையைத் திருப்பி அனுப்பவும் // ஒரு உண்மையான பயன்பாட்டில், நீங்கள் 'next/navigation'-லிருந்து `redirect()` ஐப் பயன்படுத்தி இங்கே திருப்பி விடலாம் return { message: 'பயனர் வெற்றிகரமாகப் பதிவு செய்யப்பட்டார்!', errors: {}, }; }

இந்த சர்வர் செயல்பாடு நமது படிவத்தின் மூளை. இது சுய-கட்டுப்பாட்டில், பாதுகாப்பானது மற்றும் வெற்றி மற்றும் பிழை நிலைகளுக்கு தெளிவான தரவு கட்டமைப்பை வழங்குகிறது.

படி 2: மீண்டும் பயன்படுத்தக்கூடிய, நிலை-விழிப்புணர்வு கூறுகளை உருவாக்குதல்

எங்கள் முக்கிய படிவக் கூறுகளைச் சுத்தமாக வைத்திருக்க, எங்கள் உள்ளீடுகள் மற்றும் சமர்ப்பி பொத்தானுக்காக அர்ப்பணிக்கப்பட்ட கூறுகளை உருவாக்குவோம்.

கோப்பு: components/SubmitButton.js

'use client'; import { experimental_useFormStatus as useFormStatus } from 'react-dom'; export function SubmitButton({ label }) { const { pending } = useFormStatus(); return ( {pending ? 'செயல்படுத்தப்படுகிறது...' : label} ); }

`aria-disabled={pending}` பயன்படுத்துவதை கவனிக்கவும். இது ஒரு முக்கியமான அணுகல்தன்மை நடைமுறையாகும், திரைப் படிப்பாளர்கள் முடக்கப்பட்ட நிலையைக் சரியாக அறிவிப்பதை உறுதி செய்கிறது.

படி 3: `useFormState` உடன் முக்கிய படிவத்தை ஒன்றிணைத்தல்

இப்போது, ​​எல்லாவற்றையும் நமது முக்கிய படிவக் கூறுகளில் கொண்டு வருவோம். எங்கள் UI ஐ `registerUser` செயல்பாட்டுடன் இணைக்க `useFormState`-ஐப் பயன்படுத்துவோம்.

கோப்பு: components/RegistrationForm.js

'use client'; import { experimental_useFormState as useFormState } from 'react-dom'; import { registerUser, initialState } from '../actions/authActions'; import { SubmitButton } from './SubmitButton'; export function RegistrationForm() { const [state, formAction] = useFormState(registerUser, initialState); return (

பதிவு செய்க

{state?.message && !state.errors &&

{state.message}

} {state?.message && state.errors &&

{state.message}

}

பயனர் பெயர் {state?.errors?.username && (

{state.errors.username[0]}

)}

மின்னஞ்சல் {state?.errors?.email && (

{state.errors.email[0]}

)}

கடவுச்சொல் {state?.errors?.password && (

{state.errors.password[0]}

)}

); }

இந்த கூறு இப்போது அறிவிப்பாகவும் சுத்தமாகவும் உள்ளது. `useFormState` வழங்கும் `state` பொருளைத் தவிர, இது எந்த நிலையையும் நிர்வகிக்காது. அதன் ஒரே வேலை அந்த நிலையை அடிப்படையாகக் கொண்டு UI ஐ வழங்க வேண்டும். பொத்தானை முடக்குவதற்கான தர்க்கம் `SubmitButton`-ல் பொதிந்துள்ளது, மேலும் அனைத்து சரிபார்ப்பு தர்க்கமும் `authActions.js`-ல் உள்ளது. இந்த அக்கறை பிரிப்பு, பராமரிப்புக்கு ஒரு பெரிய வெற்றியாகும்.

மேம்பட்ட நுட்பங்கள் மற்றும் தொழில்முறை சிறந்த நடைமுறைகள்

அடிப்படை முறை சக்திவாய்ந்ததாக இருந்தாலும், நிஜ-உலக பயன்பாடுகளுக்கு பெரும்பாலும் அதிக நுட்பம் தேவைப்படுகிறது. சில மேம்பட்ட நுட்பங்களை ஆராய்வோம்.

ஹைப்ரிட் அணுகுமுறை: உடனடி மற்றும் பிந்தைய சமர்ப்பிப்பு சரிபார்ப்பை இணைத்தல்

சேவையக-பக்க சோதனைகளுக்கு நிலை அடிப்படையிலான சரிபார்ப்பு சிறந்தது, ஆனால் ஒரு பயனரின் மின்னஞ்சல் செல்லாது என்று சொல்வதற்கு ஒரு நெட்வொர்க் ரவுண்ட்ரிப்பிற்காகக் காத்திருப்பது மெதுவாக இருக்கலாம். ஒரு கலப்பின அணுகுமுறை பெரும்பாலும் சிறந்தது:

• HTML5 சரிபார்ப்பைப் பயன்படுத்தவும்: அடிப்படைகளை மறக்காதீர்கள்! `required`, `type="email"`, `minLength`, மற்றும் `pattern` போன்ற பண்புக்கூறுகள் எந்தச் செலவும் இல்லாமல் உடனடி, உலாவி-சொந்த கருத்தை வழங்குகின்றன.
• லைட் கிளையன்ட்-சைட் சரிபார்ப்பு: முற்றிலும் ஒப்பனை அல்லது வடிவமைத்தல் சரிபார்ப்புகளுக்கு (எ.கா., கடவுச்சொல் வலிமை காட்டி), நீங்கள் இன்னும் குறைந்த அளவு `useState` மற்றும் `onChange` ஹேண்ட்லர்களைப் பயன்படுத்தலாம்.
• சர்வர்-சைட் அதிகாரம்: கிளையன்ட்டில் செய்ய முடியாத மிக முக்கியமான, வணிக-தர்க்க சரிபார்ப்புகளுக்கு (எ.கா., தனிப்பட்ட பயனர் பெயர்களைச் சரிபார்த்தல், தரவுத்தள பதிவேடுகளுக்கு எதிராகச் சரிபார்த்தல்) சர்வர் செயல்பாட்டை ஒதுக்குங்கள்.

இது உங்களுக்கு இரண்டு உலகங்களிலும் சிறந்ததைக் கொடுக்கும்: எளிய பிழைகளுக்கான உடனடி கருத்து மற்றும் சிக்கலான விதிகளை சரிபார்ப்பதற்கான அங்கீகரிக்கப்பட்ட சரிபார்ப்பு.

அணுகல்தன்மை (A11y): அனைவருக்கும் படிவங்களை உருவாக்குதல்

அணுகல்தன்மை பேச்சுவார்த்தைக்குட்பட்டதல்ல. நிலை அடிப்படையிலான சரிபார்ப்பை செயல்படுத்தும் போது, ​​இந்த விஷயங்களை மனதில் கொள்ளுங்கள்:

• பிழைகளை அறிவிக்கவும்: எங்கள் எடுத்துக்காட்டில், பிழை செய்தி கொள்கலன்களில் `aria-live="polite"` ஐப் பயன்படுத்தினோம். இது திரைப் படிப்பாளர்களுக்கு பிழை செய்தி தோன்றியவுடன், பயனரின் தற்போதைய ஓட்டத்தை சீர்குலைக்காமல் அறிவிக்கச் சொல்கிறது.
• பிழைகளை உள்ளீடுகளுடன் தொடர்புபடுத்துங்கள்: மிகவும் வலுவான இணைப்புக்கு, `aria-describedby` பண்பைப் பயன்படுத்தவும். உள்ளீடு அதன் பிழை செய்தி கொள்கலனின் ID ஐச் சுட்டிக்காட்டலாம், ஒரு நிரல் இணைப்பை உருவாக்குகிறது.
• மேலாண்மை கவனம்: பிழைகளுடன் சமர்ப்பித்த பிறகு, நிரல் மூலம் முதல் தவறான புலத்திற்கு கவனத்தை நகர்த்துவதைக் கவனியுங்கள். இது பயனர்கள் என்ன தவறு நடந்தது என்பதைத் தேடுவதிலிருந்து காப்பாற்றுகிறது.

`useFormStatus` இன் `data` சொத்துடன் ஆப்டிமிஸ்டிக் UI

ஒரு சமூக ஊடக பயன்பாட்டை கற்பனை செய்து பாருங்கள், அங்கு ஒரு பயனர் ஒரு கருத்தை இடுகிறார். ஒரு நொடிக்கு ஸ்பின்னரைக் காட்டுவதற்குப் பதிலாக, பயன்பாட்டை உடனடியாக உணர வைக்கலாம். `useFormStatus`-லிருந்து வரும் `data` சொத்து இதற்கு சரியானது.

படிவம் சமர்ப்பிக்கப்படும்போது, ​​`pending` உண்மை ஆகிறது மற்றும் சமர்ப்பிப்பின் `FormData`-வுடன் `data` மக்கள்தொகை கொண்டது. இந்த `data`-ஐப் பயன்படுத்தி, புதிய கருத்தை தற்காலிக, 'நிலுவையில்' காட்சி நிலையில் உடனடியாக வழங்கலாம். சர்வர் செயல்பாடு வெற்றி பெற்றால், நிலுவையில் உள்ள கருத்தை சர்வரில் இருந்து இறுதி தரவுடன் மாற்றவும். அது தோல்வியுற்றால், நிலுவையில் உள்ள கருத்தை அகற்றி, ஒரு பிழையைக் காட்டலாம். இது பயன்பாட்டை நம்பமுடியாத அளவிற்கு பதிலளிக்கக்கூடியதாக ஆக்குகிறது.

"சோதனை" நீரில் பயணித்தல்

`experimental_useFormStatus` மற்றும் `experimental_useFormState`-ல் உள்ள "சோதனை" முன்னொட்டை நிவர்த்தி செய்வது முக்கியம்.

"சோதனை" உண்மையில் என்ன அர்த்தம்

React ஒரு API-ஐ பரிசோதனையாகக் குறிக்கும்போது, ​​அதன் பொருள்:

• API மாறக்கூடும்: நிலையான சொற்பொருள் பதிப்பு கட்டுப்பாட்டை (SemVer) பின்பற்றாமல், எதிர்கால React வெளியீட்டில் பெயர், வாதங்கள் அல்லது ரிட்டர்ன் மதிப்புகள் மாற்றப்படலாம்.
• பிழைகள் இருக்கலாம்: ஒரு புதிய அம்சமாக, இன்னும் முழுமையாகப் புரிந்து கொள்ளப்படாத அல்லது தீர்க்கப்படாத ஓர விளிம்பு நிகழ்வுகள் இருக்கலாம்.
• ஆவணங்கள் குறைவாக இருக்கலாம்: முக்கிய கருத்துகள் ஆவணப்படுத்தப்பட்டாலும், மேம்பட்ட வடிவங்களில் விரிவான வழிகாட்டிகள் இன்னும் உருவாகி வருகின்றன.

எப்போது ஏற்றுக்கொள்ள வேண்டும், எப்போது காத்திருக்க வேண்டும்

எனவே, உங்கள் திட்டத்தில் பயன்படுத்த வேண்டுமா? பதில் உங்கள் சூழலைப் பொறுத்தது:

• எது சிறந்தது: தனிப்பட்ட திட்டங்கள், உள் கருவிகள், தொடக்க நிறுவனங்கள் அல்லது API மாற்றங்களை நிர்வகிப்பதில் வசதியாக இருக்கும் குழுக்கள். Next.js போன்ற கட்டமைப்பிற்குள் இதைப் பயன்படுத்துவது (இது இந்த அம்சங்களை அதன் பயன்பாட்டு ரூட்டருக்குள் ஒருங்கிணைத்துள்ளது) பொதுவாக பாதுகாப்பானது, ஏனெனில் கட்டமைப்பு சில கொந்தளிப்புகளைத் தவிர்க்க உதவும்.
• எச்சரிக்கையுடன் பயன்படுத்தவும்: பெரிய அளவிலான நிறுவன பயன்பாடுகள், பணி-முக்கியமான அமைப்புகள் அல்லது API நிலைத்தன்மை மிக முக்கியமானது என நீண்ட கால பராமரிப்பு ஒப்பந்தங்களைக் கொண்ட திட்டங்கள். இந்த நிகழ்வுகளில், ஹூக்குகள் நிலையான API-ஆக உயர்த்தப்படும் வரை காத்திருப்பது விவேகமானதாக இருக்கலாம்.

இந்த ஹூக்குகளின் உறுதிப்பாடு தொடர்பான அறிவிப்புகளுக்கு அதிகாரப்பூர்வ React வலைப்பதிவையும் ஆவணங்களையும் எப்போதும் கவனத்தில் கொள்ளுங்கள்.

முடிவு: React-ல் படிவங்களின் எதிர்காலம்

`experimental_useFormStatus`-ஐ அறிமுகப்படுத்துவது மற்றும் தொடர்புடைய API கள் ஒரு புதிய கருவி மட்டுமல்ல; React உடன் ஊடாடும் அனுபவங்களை எவ்வாறு உருவாக்குவது என்பதில் இது ஒரு தத்துவார்த்த மாற்றத்தைக் குறிக்கிறது. வலை தளத்தின் அடித்தளங்களை ஏற்றுக்கொள்வதன் மூலமும், நிலையான தர்க்கத்தை சர்வரில் இணைப்பதன் மூலமும், எளிமையான, அதிக பின்னடைவு மற்றும் பெரும்பாலும் சிறந்த செயல்திறன் கொண்ட பயன்பாடுகளை உருவாக்க முடியும்.

`useFormStatus`, ஒரு படிவ சமர்ப்பிப்பின் வாழ்நாள் சுழற்சிக்கு கூறுகள் எவ்வாறு செயல்படுகின்றன என்பதற்கு ஒரு சுத்தமான, பிரிக்கப்பட்ட வழியை வழங்குகிறது என்பதை நாங்கள் பார்த்தோம். இது நிலுவையில் உள்ள நிலைகளுக்கான ப்ராப் துளையிடுதலை நீக்குகிறது மற்றும் ஒரு ஸ்மார்ட் `SubmitButton` போன்ற நேர்த்தியான, சுய-கட்டுப்பாட்டு UI கூறுகளை செயல்படுத்துகிறது. `useFormState`-உடன் இணைந்தால், இது நிலை அடிப்படையிலான சரிபார்ப்பின் சக்திவாய்ந்த வடிவத்தைத் திறக்கிறது, அங்கு சர்வர் இறுதி அதிகாரியாகவும், கிளையன்ட்டின் முக்கிய பொறுப்பு சர்வர் செயல்பாட்டின் மூலம் திரும்பப் பெறப்பட்ட நிலையை வழங்குவதாகும்.

"சோதனை" குறிச்சொல் எச்சரிக்கைக்கு உத்தரவாதம் அளித்தாலும், திசை தெளிவாக உள்ளது. React-ல் படிவங்களின் எதிர்காலம் முற்போக்கான மேம்பாடு, எளிமைப்படுத்தப்பட்ட நிலை மேலாண்மை மற்றும் கிளையன்ட் மற்றும் சர்வர் தர்க்கத்திற்கு இடையே ஒரு சக்திவாய்ந்த, தடையற்ற ஒருங்கிணைப்பாகும். இன்று இந்த புதிய ஹூக்குகளை மாஸ்டரிங் செய்வதன் மூலம், நீங்கள் ஒரு புதிய API-ஐக் கற்றுக்கொள்வது மட்டுமல்ல; React உடன் அடுத்த தலைமுறை வலை பயன்பாட்டு வளர்ச்சிக்காக நீங்கள் தயாராகிறீர்கள்.